<template>
  <div class="handnav">
    <router-link
      tag="div"
      :to="{ name: 'City', params: { cityname: cityName } }"
      class="cityName"
    >
      <span>{{ cityName }}</span
      ><i class="el-icon-arrow-down"></i>
    </router-link>
    <div class="search">
      <input v-model="input" placeholder="请输入内容" class="input" />
    </div>
    <div :class="shoppingIN==='shopping_A'?'shopping_A':'shopping'" v-show="shopingShow" @click="busss">
      <img src="../../assets/images/gowuche.png" alt="" />
    </div>
    <div :class="erjiIN==='erji_A'?'erji_A':'erji'" v-show="erjiShow">
      <img src="../../assets/images/erji.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "HandNav",
  props:['shopingShow','shoppingIN','erjiIN','erjiShow'],
  data() {
    return {
      input: "",
      cityName: "北京",
      //定义在每个页面购物车 耳机 是否显示
      // shoppingIN:'shopping_A',
      // erjiIN:"erji_A",
      // shopingShow:true,
      // erjiShow:true
    };  
  },
  mounted() {
    // console.log(this.shopingShow);
    this.$bus.$on("cityNameData", (data) => {
      this.cityName = data;
    });
  },
  methods:{
    busss(){
      this.$bus.$emit('cs',"测试")
    }
  }
};
</script>

<style scoped>
.handnav {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 10px;
}
.cityName {
  font-size: 14px;
}
.input {
  width: 242px;
  height: 30px;
  background-color: #eee;
  border-radius: 30px;
  padding-left: 18px;
  border: none;
  outline: none;
  margin: 0 5px;
}
.shopping {
  width: 19px;
  height: 19px;
  margin-left: 3px;
}
.shopping_A{
  width: 25px;
  height: 25px;
  margin-left: 10px;
}
.erji{
  width: 21px;
  height: 20px;
  margin-left: 3px;
}
.erji_A {
  width: 40px;
  height: 30px;
  margin-left: 5px;
}
.erji > img {
  width: 100%;
  height: 100%;
}
</style>